window.onload=function(){
    searrch();
    timeBack();
    bannerPic();
}
// 头部搜索框背景颜色的改变
function searrch(){
        // 1.获取轮播图的高度--offsetHeight
        var bannerHeight=document.querySelector(".jd_banner").offsetHeight;
        var search=document.querySelector(".jd_search");
        window.onscroll=function(){
            // 获取滚动出去的高度并判断兼容性
            var offsetTop=document.body.scrollTop || document.documentElement.scrollTop;
            var opacity=0;
            if(offsetTop<bannerHeight){
                opacity=offsetTop/bannerHeight;
                search.style.backgroundColor="rgba(233,35,34,"+opacity+")";
            }
        }
}
// 倒计时
function timeBack(){
    var spans=document.querySelector(".jd_ptime").querySelectorAll("span");
    var totalTime=4500;
    var timeId=setInterval(function(){
        totalTime--;
        if(totalTime<0){
            clearInterval(timeId);
            return;
        }
        var hour=Math.floor(totalTime/3600);
        var minute=Math.floor(totalTime/3600%60);
        var second=Math.floor(totalTime%60);

        spans[0].innerHTML=Math.floor(hour/10);
        spans[1].innerHTML=Math.floor(hour%10);

        spans[3].innerHTML=Math.floor(minute/10);
        spans[4].innerHTML=Math.floor(minute%10);

        spans[6].innerHTML=Math.floor(second/10);
        spans[7].innerHTML=Math.floor(second%10);

    },1000);
}
// 轮播图
function bannerPic(){
    //获取ul，复制第一张和在最后一张图片，并添加到首尾  
    var banners=document.querySelector(".jd_banner");
    var imgBox=banners.querySelector("ul:first-of-type");
    var first=imgBox.querySelector("li:first-of-type");
    var last=imgBox.querySelector("li:last-of-type");
    imgBox.appendChild(first.cloneNode(true));
    imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
    
    // 设置样式，动态获取ul的宽度
    var bannerWidth=banners.offsetWidth;
    var lis=imgBox.querySelectorAll("li");
    // li的个数count
    var counts=lis.length;
    // ul的宽度
    var uls=bannerWidth*counts+"px";
    imgBox.style.width=uls;
    for(var i=0;i<lis.length;i++){
        lis[i].style.width=bannerWidth+"px";
    }
    var index=1;
    imgBox.style.left=-bannerWidth+"px";
    // onresize屏幕尺寸发生改变，重新计算ul宽度和li的偏移值
    window.onresize=function(){
        // 重新获取宽度，覆盖原来的宽度
        bannerWidth=banners.offsetWidth;
        var lis=imgBox.querySelectorAll("li");
        // li的个数count
        var counts=lis.length;
        // ul的宽度
        var uls=bannerWidth*counts+"px";
        imgBox.style.width=uls;
        for(var i=0;i<lis.length;i++){
            lis[i].style.width=bannerWidth+"px";
        }
        imgBox.style.left=-index*bannerWidth+"px";
    }
    var setflags=function(index){
        var lists=banners.querySelector("ul:last-of-type").querySelectorAll("li");
        for(var i=0;i<lists.length;i++){
            // lists[i].className="";
            lists[i].classList.remove("active");
        }
        // lists[index-1].className="active";
        lists[index-1].classList.add("active");
    }
    // 自动轮播
    var timeId;
    var startTime=function(){
        timeId=setInterval(function(){
            index++;
            imgBox.style.transition="left 0.5s linear";
            imgBox.style.left=-(index*bannerWidth)+"px";
            setTimeout(function(){
                if(index==counts-1){
                    index=1;
                    imgBox.style.transition="none";
                    imgBox.style.left=-(index*bannerWidth)+"px";
                }
            },500);
        },2000);
    }
    startTime();
    // 手动轮播
    var startX,moveX,distanceX;
    imgBox.addEventListener("touchstart",function(e){
        clearInterval(timeId);
        startX=e.targetTouches[0].clientX;
    });
    var isEnd=true;
    imgBox.addEventListener("touchmove",function(e){
        if(isEnd==true){
            moveX=e.targetTouches[0].clientX;
            distanceX=moveX-startX;
            imgBox.style.transition="none";
            imgBox.style.left=(-index*bannerWidth+distanceX)+"px";
        }

    });
    imgBox.addEventListener("touchend",function(e){
        isEnd=false;
       if(Math.abs(distanceX)>100){
           if(distanceX>0){
            index--;
           }else{
            index++;
           }
           imgBox.style.transition="left 0.5s linear";
           imgBox.style.left=(-index*bannerWidth)+"px";
       }else if(Math.abs(distanceX)<100){
            imgBox.style.transition="left 0.5s linear";
            imgBox.style.left=(-index*bannerWidth)+"px";
       }
    //初始化值，防止当前数据影响下一轮调用
       startX=0;
       moveX=0;
       distanceX=0;
    });
    //无缝滑动----webkitTransitionEnd---监听动画完成是触发
    imgBox.addEventListener("webkitTransitionEnd",function(){
        if(index==counts-1){
            index=1;
            imgBox.style.transition="none";
            imgBox.style.left=-(index*bannerWidth)+"px";
        }else if(index==0){
            index=counts-2;
            imgBox.style.transition="none";
            imgBox.style.left=-(index*bannerWidth)+"px";
        }
        setflags(index);
        setTimeout(function(){
            isEnd=true;
            clearInterval(timeId);
            startTime();
        },100);
       
    });
}
